<template>
  <div class="wrap">
    <div class="item">
      <div class="head">团购信息</div>
      <div class="list">
        <span class="title">团购编号：</span><span class="text">3234234</span>
      </div>
      <div class="list">
        <span class="title">团购状态：</span><span class="text">团购状态</span>
      </div>
      <div class="list">
        <span class="title">购买用户：</span><span class="text">点秋...</span>
      </div>
      <div class="list">
        <span class="title">开团时间：</span><span class="text">2017-8-12 15:12:12</span>
      </div>
      <div class="list">
        <span class="title">结束时间：</span><span class="text">2017-8-12 15:12:12</span>
      </div>
    </div>
    <div class="item">
      <div class="head">商品信息</div>
      <div class="list">
        <span class="title">商品名称：</span><span class="text">丝滑巧克力</span>
      </div>
    </div>
    <div class="item">
      <div class="head">参团信息</div>
      <el-table :data="tableData" border>
        <el-table-column prop="name" label="用户" min-width="100" />
        <el-table-column prop="time" label="参团时间" min-width="80" />
        <el-table-column prop="orderNo" label="订单号码" min-width="60" />
        <el-table-column prop="sku" label="订单状态" min-width="120" />
        <el-table-column prop="savle" label="操作" min-width="60" />
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [{ name: '一夜长大', orderNo: 21342342234234,  price: 3333.00, sku: '已完成，已付款，收货确认', time: '2014-12-12 12:12:12' }],
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '用户下单',
        timestamp: '2018-04-11'
      }],
      dialogTableVisible: true,
      isloadingUpdate: false
    }
  },
   methods: {
    refund() { // 退款

    },
    setContent() { // 操作备注
      this.$prompt('备注', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的邮箱是: ' + value
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });      
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

        } else {

        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .wrap{
    max-width: 1200px;
    min-width: 800px;
    margin: 20px auto;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    .item{
      padding:10px;
      border-bottom: 1px solid #ccc;
      &:last-child{
        border-bottom: none;
      }
      .head{
        height: 34px;
        line-height: 34px;
        font-weight: 600;
      }
      .list{
        line-height: 24px;
        .title{
          color: #666;
        }
        .text{
          color: 333;
        }
        .other{
          margin-left: 10px;
          color: red;
        }
      }
    }
  }
</style>